Skip to content

feat: show remaining time on stream cards#35

Open
anmolsah wants to merge 1 commit into
OpenStreamFi:mainfrom
anmolsah:feat/stream-countdown
Open

feat: show remaining time on stream cards#35
anmolsah wants to merge 1 commit into
OpenStreamFi:mainfrom
anmolsah:feat/stream-countdown

Conversation

@anmolsah

Copy link
Copy Markdown
Contributor

Show time-remaining countdown on stream card (#33)

Summary

This PR improves the readability of Stream cards by replacing the raw date range display with a relative countdown showing the remaining time until a stream ends.

Instead of displaying dates such as:

Jun 3 2026 → Jun 10 2026

the card now displays:

  • 2 days left
  • 5 hours left
  • 30 minutes left
  • Ended

The original absolute date range remains accessible through a tooltip on hover.

Changes Made

1. Added formatTimeRemaining utility

File: src/lib/format.ts

Implemented a new helper:

formatTimeRemaining(endSec: number, nowSec?: number): string

Features:

  • Returns the largest sensible time unit remaining (days, hours, minutes, or seconds).
  • Handles singular and plural forms correctly.
  • Returns "Ended" when the current time is equal to or greater than endSec.
  • Supports an optional nowSec parameter for deterministic testing.

2. Updated Stream Card UI

File: src/components/StreamCard.tsx

  • Replaced the raw date range text with formatTimeRemaining.
  • Reused the existing ended status logic for completed/cancelled streams.
  • Added a title attribute containing the full date range so exact dates remain available on hover.

3. Added Frontend Unit Testing

Files:

  • package.json
  • vitest.config.ts
  • src/lib/format.test.ts

Changes include:

  • Added Vitest as a development dependency.

  • Added a test script for running unit tests.

  • Configured Vitest with a Node test environment.

  • Added unit tests covering:

    • Days remaining
    • Hours remaining
    • Minutes remaining
    • Seconds remaining
    • Ended streams
    • Default nowSec behavior

Verification

Unit Tests

pnpm test

Result:

✓ src/lib/format.test.ts (6 tests)
Test Files  1 passed (1)
Tests       6 passed (6)

Type Checking

pnpm exec tsc --noEmit

Result:

  • ✅ Passes with no TypeScript errors.

Acceptance Criteria

  • ✅ Active streams display a relative countdown.
  • ✅ Past streams display "Ended".
  • ✅ Exact dates remain accessible via tooltip.
  • formatTimeRemaining includes unit tests.
  • pnpm exec tsc --noEmit passes.

@vercel

vercel Bot commented Jun 14, 2026

Copy link
Copy Markdown

@anmolsah is attempting to deploy a commit to the Bukunmi-Dev Projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant